import React, {PropsWithChildren, useEffect, useState} from 'react'
import styles from "./MarketEditForm.module.sass"
import {Button, Cell, Form, Input} from "@nutui/nutui-react-taro";
import {getEmployeeSummaries} from "../apis/EmployeeApi";
import {NumberIdAndName} from "../types/BasicModels";
import {getAllGoodsBrand, GoodsBrandSummary} from "../apis/GoodsBrandsApi";
import SelectableListActionSheet from "./SelectableListActionSheet";
import SingleSelectableListActionSheet from "./SingleSelectableListActionSheet";

export interface MarketEditInitialValue {
    name: string
    excludeBrandIds: number[]
    shoppingGuideIds: number[]
    saleManagerId?: number
}

export interface MarketEditFormProps extends PropsWithChildren {
    initialValue?: MarketEditInitialValue
    onConfirm: (value: MarketEditInitialValue,data:MarketDetailResponseFormData) => Promise<void>
}

export interface MarketDetailResponseFormData{
    name:string
    saleManager?:NumberIdAndName
    excludeBrands: NumberIdAndName[]
    shoppingGuides:NumberIdAndName[]
}

const MarketEditForm: React.FC<MarketEditFormProps> = ({initialValue, onConfirm}) => {
    const [confirming, setConfirming] = useState(false)
    const [employees, setEmployees] = useState<NumberIdAndName[]>([])
    const [goodsBrands, setGoodsBrands] = useState<GoodsBrandSummary[]>([])
    const [excludeBrandIds, setExcludeBrandIds] = useState<number[]>(initialValue?.excludeBrandIds ?? [])
    const [showSelectShoppingGuideActionSheet, setShowSelectShoppingGuideActionSheet] = useState(false)
    const [selectedShoppingGuides, setSelectedShoppingGuides] = useState<number[]>(initialValue?.shoppingGuideIds ?? [])
    const [showSelectSaleManagerActionSheet, setShowSelectSaleManagerActionSheet] = useState(false)
    const [selectedSaleManager, setSelectedSaleManager] = useState<number | undefined>(initialValue?.saleManagerId)

    useEffect(() => {
        getEmployeeSummaries().then(response => {
            setEmployees(response.data)
        })
        getAllGoodsBrand().then(response => {
            setGoodsBrands(response.data)
        })
    }, []);
    return <>
        <Form className={styles.container}
              footer={<Button formType={"submit"} type={"primary"}
                              loading={confirming} block>保存</Button>}
              labelPosition={"top"} initialValues={initialValue} onFinish={async (values) => {
            setConfirming(true)
            try {
                await onConfirm({
                    ...values,
                    shoppingGuideIds: selectedShoppingGuides,
                    saleManagerId: selectedSaleManager,
                    excludeBrandIds,
                },{
                    name: values.name,
                    shoppingGuides: selectedShoppingGuides.map(it => employees.find(employee => employee.id === it)!!),
                    excludeBrands:excludeBrandIds.map(it=>goodsBrands.find(brand=>brand.id===it)!!),
                    saleManager:employees.find(it=>it.id===selectedSaleManager),
                })

            } finally {
                setConfirming(false)
            }
        }}>
            <Form.Item required label={"名称"} name={"name"}
                       rules={[{required: true, message: "请输入卖场名称"}]}>
                <Input placeholder={"名称"}/>
            </Form.Item>
            <Form.Item label={"业务员"} name={"saleManagerId"}>
                <Cell title={employees.find(it => it.id === selectedSaleManager)?.name || "选择业务员"}
                      onClick={() => {
                          setShowSelectSaleManagerActionSheet(true)
                      }}/>
            </Form.Item>
            <Form.Item label={"导购"} name={"roleId"}>
                <Cell
                    title={employees.filter(it => selectedShoppingGuides.includes(it.id)).map(it => it.name).join("，") || "选择导购"}
                    onClick={() => {
                        setShowSelectShoppingGuideActionSheet(true)
                    }}/>
            </Form.Item>
        </Form>
        <SelectableListActionSheet
            visible={showSelectShoppingGuideActionSheet}
            onCancel={() => {
                setShowSelectShoppingGuideActionSheet(false)
            }}
            value={selectedShoppingGuides}
            onChange={values => setSelectedShoppingGuides(values.map(Number))}
            options={employees.map(it => ({key: it.id.toString(), label: it.name}))}/>
        <SingleSelectableListActionSheet
            visible={showSelectSaleManagerActionSheet}
            onCancel={() => {
                setShowSelectSaleManagerActionSheet(false)
            }}
            value={selectedSaleManager}
            onChange={value => setSelectedSaleManager(value)}
            options={employees.map(it => ({key: it.id, label: it.name}))}/>
    </>
}

export default MarketEditForm


